<template>
  <div class="home-container min-h-screen bg-gradient-to-b from-emerald-50 to-white">
    <!-- 顶部导航 -->
    <header class="bg-white/80 backdrop-blur-sm shadow-sm sticky top-0 z-10 transition-all duration-300">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center gap-2">
          <i class="fa-solid fa-leaf text-emerald-600 text-2xl"></i>
          <h1 class="text-xl font-bold text-gray-800">植物卫士</h1>
        </div>
        <nav>
          <button
              @click="handleLogout"
              class="flex items-center gap-1 text-gray-600 hover:text-emerald-600 transition-colors px-3 py-2 rounded-md"
          >
            <i class="fa-solid fa-sign-out"></i>
            <span>退出登录</span>
          </button>
        </nav>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8 md:py-16">
      <!-- 英雄区域 -->
      <section class="text-center mb-16 md:mb-24 relative overflow-hidden">
        <div class="absolute inset-0 -z-10 opacity-10">
          <i class="fa-solid fa-seedling absolute -top-10 -left-10 text-[200px] text-emerald-500"></i>
          <i class="fa-solid fa-leaf absolute -bottom-20 -right-20 text-[200px] text-emerald-500"></i>
        </div>

        <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-800 mb-4 leading-tight">
          智能植物病害<br class="md:hidden">检测系统
        </h2>
        <p class="text-gray-600 text-lg md:text-xl max-w-2xl mx-auto mb-8">
          上传植物叶片图片，快速识别病害类型，提供专业防治建议，守护植物健康生长
        </p>

        <!-- 核心功能按钮 -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <button
              @click="$router.push('/detect/upload')"
              class="group bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-8 py-4 rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2"
          >
            <i class="fa-solid fa-microscope text-xl group-hover:scale-110 transition-transform"></i>
            <span>开始检测</span>
          </button>

          <button
              @click="$router.push('/detect/result')"
              class="bg-white border border-gray-200 hover:border-emerald-200 text-gray-700 font-medium px-8 py-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2"
          >
            <i class="fa-solid fa-clock-rotate-left text-emerald-600"></i>
            <span>检测历史</span>
          </button>
        </div>
      </section>

      <!-- 功能特点 -->
      <section class="mb-20">
        <h3 class="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-12">系统核心功能</h3>

        <div class="grid md:grid-cols-3 gap-8">
          <!-- 功能卡片1 -->
          <div class="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100">
            <div class="w-14 h-14 bg-emerald-100 rounded-full flex items-center justify-center mb-5">
              <i class="fa-solid fa-upload text-emerald-600 text-xl"></i>
            </div>
            <h4 class="text-xl font-semibold text-gray-800 mb-3">便捷上传</h4>
            <p class="text-gray-600">
              支持多种图片格式上传，自动预处理图片，确保检测准确性，操作简单直观
            </p>
          </div>

          <!-- 功能卡片2 -->
          <div class="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100">
            <div class="w-14 h-14 bg-emerald-100 rounded-full flex items-center justify-center mb-5">
              <i class="fa-solid fa-brain text-emerald-600 text-xl"></i>
            </div>
            <h4 class="text-xl font-semibold text-gray-800 mb-3">智能识别</h4>
            <p class="text-gray-600">
              基于AI算法精准识别多种植物病害，提供检测置信度，辅助判断病害类型
            </p>
          </div>

          <!-- 功能卡片3 -->
          <div class="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100">
            <div class="w-14 h-14 bg-emerald-100 rounded-full flex items-center justify-center mb-5">
              <i class="fa-solid fa-history text-emerald-600 text-xl"></i>
            </div>
            <h4 class="text-xl font-semibold text-gray-800 mb-3">历史记录</h4>
            <p class="text-gray-600">
              自动保存所有检测记录，支持查看历史数据，跟踪植物健康变化趋势
            </p>
          </div>
        </div>
      </section>

      <!-- 使用流程 -->
      <section class="mb-16 bg-gradient-to-r from-emerald-500/5 to-emerald-600/5 rounded-3xl p-8 md:p-12">
        <h3 class="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-12">简单三步，完成检测</h3>

        <div class="grid md:grid-cols-3 gap-8 relative">
          <!-- 连接线（仅桌面显示） -->
          <div class="hidden md:block absolute top-1/4 left-0 right-0 h-1 bg-emerald-200 -z-10"></div>

          <!-- 步骤1 -->
          <div class="text-center">
            <div class="w-16 h-16 bg-emerald-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-md">1</div>
            <h4 class="text-xl font-semibold text-gray-800 mb-2">上传图片</h4>
            <p class="text-gray-600">选择清晰的植物叶片图片，支持JPG、PNG格式</p>
          </div>

          <!-- 步骤2 -->
          <div class="text-center">
            <div class="w-16 h-16 bg-emerald-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-md">2</div>
            <h4 class="text-xl font-semibold text-gray-800 mb-2">等待检测</h4>
            <p class="text-gray-600">系统自动分析图片，识别病害类型和严重程度</p>
          </div>

          <!-- 步骤3 -->
          <div class="text-center">
            <div class="w-16 h-16 bg-emerald-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-md">3</div>
            <h4 class="text-xl font-semibold text-gray-800 mb-2">查看结果</h4>
            <p class="text-gray-600">获取详细病害报告和防治建议，保存历史记录</p>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-50 border-t border-gray-100 py-8">
      <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p>© 2023 植物卫士 - 智能植物病害检测系统</p>
        <p class="mt-2">专注于植物健康监测与病害防治</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token');
  ElMessage.success('已退出登录');
  router.push('/login');
};
</script>

<style scoped>
/* 基础动画定义 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 页面元素动画应用 */
section {
  animation: fadeIn 0.6s ease-out forwards;
}

/* 延迟动画，创建层次感 */
section:nth-child(2) { animation-delay: 0.1s; }
section:nth-child(3) { animation-delay: 0.2s; }
</style>
